<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import geoJson from "@/assets/双鸭山市.json";
require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    fenbuIdx: {
      type: String | Number,
      default: 1,
    },
  },
  data() {
    return {
      chart: null,
      mapDate: [
        {
          name: "饶河县",
          value: [133.583824, 47.046226],
          datas: 5,
          label: "xx电场",
        },
        {
          name: "宝清县",
          value: [132.206182, 46.331656],
          datas: 6,
          label: "xx电场",
        },
        {
          name: "友谊县",
          value: [131.825229, 46.775541],
          datas: 7,
          label: "xx电场",
        },
        {
          name: "宝山区",
          value: [131.55024, 46.548901],
          datas: 8,
          label: "xx电场",
        },
        {
          name: "岭东区",
          value: [131.209207, 46.521186],
          datas: 9,
          label: "xx电场",
        },
        {
          name: "四方台区",
          value: [131.323525, 46.652118],
          datas: 10,
          label: "xx电场",
        },
        {
          name: "尖山区",
          value: [131.173535, 46.653871],
          datas: 15,
          label: "xx电场",
        },
        {
          name: "集贤县",
          value: [131.070679, 46.844494],
          datas: 20,
          label: "xx电场",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    fenbuIdx: {
      handler(newVal, oldVal) {
        this.initChart();
      },
      immediate: true,
    },
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      var that = this;
      let iconDc = require("@/assets/images/icon/dc-blue.png");
      if (this.fenbuIdx == 1) {
        iconDc = require("@/assets/images/icon/dc-blue.png");
      } else {
        iconDc = require("@/assets/images/icon/fan.png");
      }

      echarts.registerMap("shuangyashan", geoJson);

      this.chart.setOption({
        geo: {
          map: "shuangyashan",
          layoutCenter: ["50%", "50.5%"],
          layoutSize: "100%",
          itemStyle: {
            areaColor: "#00FFFF",
            shadowColor: "#05F7FF",
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowOffsetY: 5,
            emphasis: {
              areaColor: "#05F7FF",
              borderWidth: 1,
              color: "green",
              label: {
                show: false,
              },
            },
          },
        },
        series: [
          {
            type: "map",
            itemStyle: {
              borderColor: "#36F5F7",
              borderWidth: 1,
              areaColor: "#1e467d",
              emphasis: {
                areaColor: "#1e467d",
                label: {
                  show: false,
                },
              },
            },
            zoom: 1.04,
            map: "shuangyashan",
            select: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#04387b",
              },
            },
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            label: {
              show: true,
              formatter: function (params) {
                var name = params.name;
                var value = params.data.datas;
                var text = `{tline|${name}}`;
                return text;
              },
              color: "#fff",
              rich: {
                tline: {
                  color: "#ABF8FF",
                  fontSize: 12,
                },
              },
            },
            data: that.mapDate,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "image://" + iconDc,
            symbolSize: this.fenbuIdx == 1 ? [30, 40] : [50, 50],
            itemStyle: {
              color: "rgba(113,224,255)",
            },
            label: {
              show: true,
              fontSize: 16,
              position: "bottom",
              color: "#fff",
              formatter(params) {
                return params.data.label;
              },
            },
            data: that.mapDate,
          },
        ],
      });
      this.chart.on("click", (params) => {
        if (params.componentSubType === "scatter") {
          this.$router.push({
            path: this.fenbuIdx == 1 ? "/detection" : "/detection-fen",
          });
        }
      });
    },
  },
};
</script>
